Components › Forms & input › Date & time › Date-time range

Date-time range

canon

Start and end with time, all-day toggle and duration presets.

M4c (owner 28 Sep 2026, approved): all-day renders the canonical DateRangeField (from–to in one field, shared calendar, day count) instead of two DateFields with their own day arithmetic — one shape for a range of days; `.dp-field.range` ends share the field width (width 0 + flex 1), so the term row no longer overflows on 390 px (acrm branch feat/celodenni-rozsah). acrm !4087 (28 Sep 2026, owner): the visible duration next to times uses `fmtDurShort` — „45 m“ · „1 h“ · „1 h 30 m“ (in the context of time „m“ = minutes). Screen readers keep the full „min“ via `fmtDur` (TimeField option aria-label, DateTimeRange hidden live text) so „m“ is not read as metres. Other durations in the app (timeline, Setkání, tasks, reminders) keep „min“.

Used in 3 files · 3 areas · 3× — components/calendar, components/meetings, pages/ZasedackyPage

Import

import { DateTimeRangeField } from '@acrm/ui'

Props

DateTimeRangeField packages/ui/src/components/DateTimeRangeField.tsx

NameTypeDefaultDescription
value *DateTimeRangeValue——
onChange *(value: DateTimeRangeValue) => void——
stepnumber15—
allowAllDaybooleantruePřepínač „Celý den" (schůzka ano, zasedačka ne).
allowOvernightbooleanfalseSmí termín přetéct přes půlnoc? Schůzka ano (konec před začátkem = do rána). Zasedačka ne — tam je to skoro vždycky překlep, tak se to označí za chybu.
availability(v: { date: string | null; from: number | null; to: number | null; }) => { free: boolean; text: string; } | null—Stavový řádek dostupnosti — vrací {free,text} nebo null.
todayDate——
localestringDEFAULT_LOCALE_TAG—
dayExtrasReactNode—Co patří ke DNI a stojí v řádku dne hned za datem (schůzka: přepínač „Opakovat" a po zapnutí skupina frekvence · do · konec, .dp-recur). Řádek se zalamuje, skupina jako celek.
belowRowsReactNode—Pod oběma řádky (schůzka: chyba konce opakování .dp-status.busy).

CSS classes

.dp-stack.dp-termin.dp-timegroup.dp-switches.dp-recur.dp-dur.dp-status

Files